100% Pure CSS Animated Drop-Down Info-Bar - Demonstrating the info-bar with multiple tabs.

This page demonstrates the Pure CSS Info-Bar, except with multiple tabs.

To achieve this, all you do is add a small class (with one declaration) for each tab, setting its position. And a single declaration for all tabs, setting their z-index on a hover. That's it!

If you wanted, you could go to town, setting different text alignments and all-sorts. A pure CSS animated drop-down navigation system would be easy. You might also want to be more accurate with your positioning - I literally threw this together!

It would probably look much neater with evenenly-spaced tabs stacked from the left of the page, but I wanted to show you a wee trick for the (centre) tab positioning, so there you have it!

Okay, here is the CSS. The (small) extra section for multiple tabs is at the foot (notes contained within)..

highlighted source generated dynamically with corz distro machine..

/*
    Pure CSS Animated Drop-Down Info-Bar
    Multi-Tab Version

    ;o) @ corz.org
*/

.site-notice-bar::before, .site-notice-bar {
    transition: all 300ms ease-out;
    position: relative;
    display: block;
    background-color: #f9e7aa;
    color: #E8910D;
    border: solid .2rem #fbb627;
    font-weight: bold;
    font-size: 110%;
}

.site-notice-bar {
    width: 90%;
    padding: 1rem;
    margin: 10rem auto 3rem;
    border: solid .2rem #FFC44D;
    border-radius: .5rem;
    -khtml-opacity: 1;
    opacity: 1;
}

.site-notice-bar > p {
    margin: 1rem;
}

@media screen and (min-width: 921px) {

    .site-notice-bar::before, .site-notice-bar {
        position: absolute;
        border-top: none;
        border-radius: 0; /* reset corners */
        padding: 0;
    }

    .site-notice-bar::before {
        content: attr(data-tab-text);
        margin-top: 12rem;
        padding: .5rem 1rem;
        cursor: pointer;
        z-index: 100;
        display: block;
        border-bottom-left-radius: .5rem;
        border-bottom-right-radius: .5rem;
    }

    .site-notice-bar {
        top: 0;
        margin-top: -12.2rem; /* .2rem added to remove visible border */
        height: 12rem;
        width: 70%;
        left: 15%;
        z-index: 101;
        -khtml-opacity: 0.66;
        opacity: 0.66;
    }

    .site-notice-bar:hover {
        margin: 0;
        -khtml-opacity: 1;
        opacity: 1;
    }

    /* Multi-Tabs Here.. */

    /* Create one class for each visible tab (the "before" pseudo-elements).. */

    .left-tab::before {
        left: -.2rem;    /* for a clean edge. not 0 */
    }
    .right-tab::before {
        right: -.2rem; /* same as for the left-hand side, for a clean edge */
    }
    .middle-tab::before {
        /* this moves the tab left by roughly half the width of the text, to achieve */
        /* a better "center" effect (the tab is drawn *starting* at the centre, see) */
        margin-left: -5.5rem; /* insert your own magic! */

        /* if it weren't for our "optional extras" below this trick wouldn't work */
        display: inline-block;
        /* but that's not enough for most browsers, and so it's basically */
        /* redundant here, because of the next line.. */

        /* once "they" fix <insert your browser>, you can remove this line.. */
        left: 50%;
        /* and the text-align (below) will do it all */
    }

    /* For ALL classes, we set the z-index on hover so that */
    /* the other tabs don't remain visible on drop-down.*/
    .right-tab:hover, .middle-tab:hover, .left-tab:hover {
        z-index: 999; /* that ought to get to the top! */
    }

    /* Optional Extras.. */

    .middle-tab {
        /* this is what makes the middle tab appear in the centre, (at least */
        /* on kewl browsers). It also centers the text inside the info-panel. */
        text-align: center;
    }
    .right-tab {
        text-align: right;
    }

}

back to the main page

Make Big Fun Now!

;o) corz.org

Pure CSS Info-Bar (Mutli-Tab Demo)